<template>
  <div class="product-center">
    <div class="position">
      <span>当前位置&gt;<a href="javascript:void(0);">产品中心</a></span>
    </div>
    <div class="product-nav">
      <ul>
         <!-- @click="selectNavIndex=index" -->
        <li v-for="(item, index) in productNavList" :class="{active:0==index}" @click="gotoListPage(item.id)">{{item.name}}</li>
      </ul>
    </div>
    <div class="product-list" v-for="(item, index) in productNavList.slice(1)" :id="'product-' + index">
      <subtitle :zhTitle="item.name" :lineSpace="5"></subtitle>
      <div class="see-more" @click="gotoListPage(item.id)">查看更多&gt;&gt;</div>
      <div class="product-item-wrap">
        <swiper :options="getSwiperOption(index)" ref="mySwiper">
          <swiper-slide v-for="(item,index) in 12" :key="index">
            <product-item></product-item>
          </swiper-slide>
        </swiper>
        <div class="swiper-button-next" :class="['swiper-button-next-'+index]"></div>
        <div class="swiper-button-prev" :class="['swiper-button-next-'+index]"></div>
        <div class="swiper-pagination" :class="['swiper-pagination-'+index]"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import subtitle from 'COMPS/subtitle.vue'
  import productItem from 'COMPS/product-item.vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'product-center',
    components: {
      subtitle,
      productItem,
      swiper,
      swiperSlide
    },
    data() {
      return {
        // productNavList: ['热门产品','雷达','超声波','定位仪'],
        productNavList: [{
          id: 0,
          name: '热门产品'
        },{
          id: 1,
          name: '雷达'
        },{
          id: 2,
          name: '超声波'
        },{
          id: 3,
          name: '定位仪'
        }]
        // selectNavIndex: 0,
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    methods: {
      getSwiperOption(index) {
        return {
          loop: true,
          slidesPerView: 3,
          observer:true,
          observeParents:true,
          autoplay: false,
          pagination: {
            el: '.swiper-pagination-'+index,
            type: 'bullets',
          },
          navigation: {
            nextEl: '.swiper-button-next-'+index, //前进按钮的css选择器或HTML元素。
            prevEl: '.swiper-button-prev-'+index, //后退按钮的css选择器或HTML元素。
            hideOnClick: true, //点击slide时显示/隐藏按钮
            disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
            hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
          },
        }
      },
      gotoListPage(id) {
        window.location.href = "/Tpl/productList.html#position?p_id=" + id;
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-center {
    .subtitle {
      .zh-title {
        color: #000;
      }
    }
    .product-nav {
      text-align: left;
      margin: 50px 0;
      >ul {
        >li {
          cursor: pointer;
          display: inline-block;
          text-align: center;
          width: 120px;
          line-height: 40px;
          margin-right: 26px;
          color: #666;
          background-color: #f0f0f0;
          transition: all 0.2s;
          &.active {
            color: #fff;
            background-color: #47beda;
          }
          &:hover {
            color: #fff;
            background-color: #47beda;
          }
        }
      }
    }
    .product-list {
      margin-bottom: 100px;
      .see-more {
        cursor: pointer;
        text-align: right;
        padding-right: 75px;
        margin-bottom: 30px;
        color: #010101;
        &:hover {
          color: #47beda;
        }
      }
      .product-item-wrap {
        width: 1125px;
        height: 505px;
        padding-left: 20px;
        position: relative;
        .swiper-container {
          padding-left: 15px;
          .swiper-slide {
            padding-top: 5px;
            height: 510px !important;
          }
        }
      }
      .swiper-button-next,
      .swiper-button-prev{
        &:focus {
          outline: none;
        }
      }
      .swiper-button-next {
        margin-right: -45px;
        // background-image: url(~IMGS/swiper-right.png);
        // &:hover {
        //   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
        // }
      }
      .swiper-button-prev {
        margin-left: -35px;
        // background-image: url(~IMGS/swiper-left.png);
        // &:hover {
        //   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
        // }
      }
      .swiper-pagination {
        position: static;
        margin-top: 20px;
        .swiper-pagination-bullet {      
          width: 14px;
          height: 14px;
          margin-right: 15px;
          border: solid 1px #47beda;
          background-color: #fff;
          &.swiper-pagination-bullet-active {
            background-color: #47beda;
          }
        }
      }

    }
  }
</style>